@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;600&family=Noto+Sans+Arabic:wght@100;200;300;400;500&family=Poppins:wght@200;300&display=swap");
@import url("https://fonts.googleapis.com/css?family=Bangers|Cinzel:400,700,900|Lato:100,300,400,700,900|Lobster|Lora:400,700|Mansalva|Muli:200,300,400,600,700,800,900|Open+Sans:300,400,600,700,800|Oswald:200,300,400,500,600,700|Roboto:100,300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap");
/* font-family: 'Noto Naskh Arabic', serif; */
/* font-family: 'Noto Sans Arabic', sans-serif; */
/* font-family: 'Cairo', sans-serif; */

:root {
    /** color **/
    --white: #fff;
    --black: #000;
    --bg-nav: #cad0ff;
    --logo-pink: #ff0080;
    --pink_D1: #ffc8dd;
    --pink_D2: #ffafcc;
    --pink_D3: #e27396;
    --pink_D4: #ea9ab2;
    --pink_D5: #ff499e;
    --logo-blue: #009eff;
    --blue: #5b6cf9;
    --blue_D1: #bde0fe;
    --blue_D2: #a2d2ff;
    --blue_D3: #49b6ff;
    --blue_D4: #779be7;
    --logo-purple: #4a0a9e;
    --purple_D0: #fee2fe;
    --purple_D1: #efcfe3;
    --purple_D2: #cdb4db;
    --purple_D3: #a480cf;
    --purple_D4: #7723e4;
    --purple_D5: #6218c4b6;
    --purple_D6: #5b12bbd2;
    --grey-web: hsla(0, 0%, 50%);
    --grey_D1: #ccc;
    --grey_D2: #ddd;
    --grey_D3: #b6b6b6;
    --grey_D3: #666;
    --grey_D4: #494949;
    --Black_text-30: hsla(0, 0%, 0%, 0.3);
    --Black_text-50: hsla(0, 0%, 0%, 0.5);
    --black_D1: #1a1a1a;
    --black_D2: #1c1c1c;
    --black_D3: #131212;
    --black_D4: #121212;

    /** gradient**/
    --gradient_principe: linear-gradient(-90deg, #9d80cb 0%, #f7c2e6 100%);
    --gradient_2: linear-gradient(-90deg, #d4acfb 0%, #b84fce 100%);
    --gradient_3: linear-gradient(-90deg, #ea98da 0%, #5b6cf9 100%);
    --gradient_blue: linear-gradient(-90deg, #9fccfa 0%, #0974f1 100%);
    --gradient_blue1: linear-gradient(-90deg, #5c81f9 0%, #0974f1 100%);
    --gradient_pink: linear-gradient(-90deg, #f89999 0%, #f6c0ba 100%);
    --gradient-nav-1: linear-gradient(-90deg, #d8ded6 0%, #e8bdf9 100%);
    --gradient-nav-2: linear-gradient(-90deg, #e3e3e3 0%, #cad0ff 100%);

    /** typography**/
    --ff-nash: "Noto Naskh Arabic", serif;
    --ff-sans: "Noto Sans Arabic", sans-serif;
    --ff-cairo: "Cairo", sans-serif;

    --fs-1: 4.2rem;
    --fs-2: 3.2rem;
    --fs-3: 2.3rem;
    --fs-4: 1.8rem;
    --fs-5: 1.5rem;
    --fs-6: 1.4rem;
    --fs-7: 1.3rem;

    --fs-500: 500;
    --fs-600: 600;

    /** Spacing **/
    --section-padding: 75px;

    /** Shadow **/
    --shadow-1: 0 6px 15px 0 hsla(0, 0%, 0%, 0.05);
    --shadow-2: 0 10px 30px hsla(0, 0%, 0%, 0.06);
    --shadow-3: 0 10px 50px 0 hsla(220, 53%, 22%, 0.1);
    --shadow-4: 0 7px 23px rgba(0, 0, 0, 0.08);

    /** raduis **/
    --raduis-pill: 500px;
    --raduis-circle: 50%;
    --raduis-3: 3px;
    --raduis-5: 5px;
    --raduis-10: 10px;

    /** transition **/
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}
*::selection {
    background: var(--purple_D3);
    color: white;
}

li {
    list-style: none;
}
/* a,
img,
span,
data,
input,
button,
ion-icon {
  display: block;
} */

a {
    color: inherit;
    text-decoration: none;
}

img {
    height: auto;
}

input,
button {
    /* background: none; */
    border: none;
    font: inherit;
}

input {
    width: 100%;
}

button {
    cursor: pointer;
}

ion-icon {
    pointer-events: none;
}

address {
    font-size: normal;
}
:focus-visible {
    outline-offset: 4px;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: hsl(0, 0%, 90%);
}

::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 80%);
    border-radius: 200px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--purple_D3);
}

html {
    font-family: var(--ff-cairo);
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
    color: var(--grey-web);
    font-family: var(--ff-cairo);
    font-size: 1.6rem;
    line-height: 1.75;
    height: 300rem;
}
.heading,
.heading-1 {
    background: #9d80cb;
    background: linear-gradient(-90deg, #9d80cb 0%, #f7c2e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
    /* margin-bottom: 1.9rem; */
}
.heading::after,
.heading-1::after {
    content: url("../images/Accueil/separator-2.svg");
    display: block;
    width: 13rem;
    margin-inline: auto;
    margin-top: -1rem;
}
/* back to top  */
.back-to-top {
    position: fixed;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    bottom: 7rem;
    right: 2rem;
    display: inline-flex;
    text-align: center;
    background-color: rgb(171, 126, 255);
    border-radius: 50px;
    z-index: 3;
    padding: 10px;
    transition: 0.3s linear;
}
.back-to-top span {
    color: #fff;
    font-size: 25px;
    transition: 0.2s linear;
}
.back-to-top:hover {
    background-color: var(--blue);
}
.back-to-top:hover span {
    transform: translateY(-4px);
}
/* ---------------navbar section-----------------  */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-nav);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5%;
}
header .logo {
    display: flex;
    align-items: center;
    gap: 15px;
}
header .logo .nom-ar {
    color: var(--logo-purple);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--ff-cairo);
}
header .logo .nom-fr {
    font-family: "Roboto", sans-serif;
    display: flex;
    align-items: center;
    line-height: 0.4px;
    font-size: 8px;
    letter-spacing: 3.3px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--purple_D4);
    padding: 3px 3px;
    text-align: center;
}

.header .navbar a {
    font-size: 13px;
    color: var(--black_D2);
    font-weight: var(--fs-600);
    margin: 0 2rem;
    position: relative;
    padding-block: 0.4rem;
}

.header .navbar a:hover,
.header .navbar a.active {
    color: var(--purple_D4);
    font-weight: 700;
    font-size: 13px;
}
.header .navbar .hover-underline,
.header .navbar .hover-underline.active {
    position: relative;
    max-width: max-content;
}

.header .navbar .hover-underline::after,
.header .navbar .hover-underline.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border: 0.1rem solid var(--purple_D3);
    transform: scaleX(0.2);
    opacity: 0;
    transition: 500ms ease;
}

.header .navbar .hover-underline:is(:hover, :focus-visible)::after,
.header .navbar .hover-underline.active::after {
    transform: scaleX(1);
    opacity: 1;
}

.header .icons div {
    font-size: 17px;
    margin-left: 1.7rem;
    color: #494949;
    cursor: pointer;
}
.header .icons div:hover {
    color: var(--purple_D4);
}
#menu-btn {
    display: none;
}

/* ------------login Form--------------  */
/* login form  */
.login-form {
    height: 100%;
    width: 100%;
    position: fixed;
    top: -120%;
    left: 0;
    z-index: 1000;
    background: rgba(105, 105, 105, 0.432);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-2);
}

.login-form.popup {
    top: 0;
}
.login-form form {
    width: 35rem;
    background: #fff;
    margin: 0 2rem;
    padding: 1rem 3rem;
    border-radius: var(--raduis-10);
    box-shadow: var(--shadow-4);
    position: relative;
}
.login-form form h3 {
    font-size: 20px;
    font-weight: 700;
    padding: 20px 0;
    text-align: center;
    background: #d4acfb;
    background: linear-gradient(-90deg, #b84fce 0%, #d4acfb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-form form .box {
    width: 100%;
    padding: 1rem 0;
    margin: 1rem 0;
    border-bottom: 1px solid var(--grey_D1);
    font-size: 14px;
    color: #333;
    text-transform: none;
}
.login-form form .box::placeholder {
    font-size: 14px;
    color: var(--grey_D3);
}

.login-form form .box:focus {
    border-color: #cd9cfd;
}
.login-form form .box:nth-child(3) {
    margin-bottom: 3rem;
}
.login-form form p {
    font-size: 13px;
    color: var(--grey_D3);
    padding: 0.5rem 0;
    text-align: center;
    margin-bottom: 8px;
}
.login-form form p a {
    color: var(--blue);
    border-bottom: 1px solid var(--blue);
}

.btn {
    padding: 0.7rem 5rem;
    font-size: 16px;
    color: #fff;
    background: #d4acfb;
    border-radius: 100px;
    margin-top: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: 0.4s linear all;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.btn::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: -100%;
    background: #fff9;
    height: 150%;
    width: 20%;
    transform: rotate(25deg);
    z-index: -1;
}
.btn:hover::before {
    transition: 0.4s linear;
    left: 120%;
}
.login-form form .btn {
    width: 100%;
}
.home a .btn:hover,
.login-form form .btn:hover {
    color: #666;
    transform: translateY(-5px);
    font-weight: 600;
}
.login-form form .fa-times {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: 19px;
    color: #999;
    cursor: pointer;
}
.login-form form .fa-times:hover {
    color: #d0a3fd;
}

/*_________________*\
   home section
\*_________________*/
/* hero section  */

.home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    background: url("../images/Accueil/bg-final-1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    text-align: center;
}
.home h1 {
    font-size: 25px;
    font-weight: 700;
    line-height: 44px;
    background: #5b6cf9;
    background: linear-gradient(-90deg, #5b6cf9 0%, #ea98da 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home p {
    font-size: 15px;
    font-weight: 500;
    padding: 1rem 0;
    width: 100%;
    margin: auto;
    display: block;
}
/* .home .shape {
    position: absolute;
    background: url("../images/Accueil/clouds-4.png");
    left: 0;
    bottom: -0.2rem;
    height: 4rem;
    width: 100%;
    block-size: 180rem 10rem;
    filter: drop-shadow(2px -9px 20px -11px rgb(94, 94, 94));
    /* opacity: 95%; */
    /* animation: animate 18s linear infinite; */
/* } */ 
@keyframes animate {
    0% {
        background-position-x: 0rem;
    }
    100% {
        background-position-x: 90rem;
    }
}
/*_________________*\
   subjects section
\*_________________*/

.subjects .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin: 80px 25px 20px 25px;
}
.subjects .box-container .box {
    padding: 1.2rem 2rem;
    text-align: center;
    border: 0.1rem solid #dadada;
    border-radius: 15px;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: 0.3s linear;
}

.subjects .box-container .box:hover {
    transform: translateY(-18px);
}

.subjects .box-container .box h3 {
    margin-top: 15px;
    padding: 0.5rem 0;
    font-size: 16px;
    color: #285757;
    font-weight: 600;
}
.subjects .box-container .box p {
    font-size: 13px;
    line-height: 2;
}

/*_________________*\
   dessin section
\*_________________*/
.dessin {
    margin-top: 100px;
}

.dessin-content {
    width: 90%;
}
.dessin-content h3 {
    color: var(--black_D3);
    text-align: center;
    margin-top: 40px;
    font-weight: 600;
    font-size: 17px;
}
.dessin-content p {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    padding: 1rem 0;
    line-height: 2.5;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-gap: 25px;
}
.gallery a {
    height: 250px;
    width: 300px;
    margin: 20px;
    border-radius: 5px;
    overflow: hidden;
}
.gallery a img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.gallery a img:hover {
    transform: scale(1.1);
}
/*_________________*\
 theatre
\*_________________*/
.theatre {
    margin-top: 110px;
}
.content-theatre {
    margin-top: -210px;
}
.theatre .review-slider .slide {
    margin-top: 10px;
    margin-bottom: 70px;
    background-color: white;
    border-radius: 0.5rem;
    text-align: center;
    padding: 1rem;
    box-shadow: var(--shadow-3);
}

.theatre .review-slider .slide h3 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
    background: #ea98da;
    background: linear-gradient(to right, #ea98da 0%, #5b6cf9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.theatre .review-slider .slide p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    padding: 1rem 0;
    margin-bottom: 30px;
}
.swiper-pagination-bullet-active {
    background: var(--purple_D4);
}
.curved {
    background-color: #b7b9e571;
    text-align: center;
}
.audio {
    background-color: #fcf2f3b0;
}
.curved h3 {
    color: var(--black_D3);
    text-align: center;
    font-weight: 600;
    font-size: 17px;
}

.curved p {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    padding: 1rem 5%;
    line-height: 2;
}

.curved svg {
    display: block;
}
.curved.upper {
    background: #fff;
    display: block;
}
/*_________________*\
      Music
\*_________________*/
.music .music-title {
    color: var(--black_D3);
    font-weight: 600;
    font-size: 17px;
}

.right-music-content {
    margin-right: 25px;
    margin-top: 40px;
}
.left-music-content p {
    font-size: 14px;
    width: 80%;
    padding: 20px 0;
    line-height: 2.4;
}
.right-music-content .right-btn a {
    font-size: 14px;
    background-color: var(--purple_D3);
    color: white;
    padding: 8px 14px;
    border-radius: 50px;
    transition: 0.4s linear;
}
.right-music-content .right-btn a:hover {
    background-color: transparent;
    color: var(--purple_D3);
    border: 1px solid var(--purple_D3);
}
.main-music {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 90px;
    transition: 0.4s linear;
}
.main-music:hover {
    transform: translateY(-5px);
}
.main-music p {
    font-size: 14px;
    text-align: center;
    line-height: 2;
}
.main-music h2 {
    color: var(--black_D3);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
}

.inner-music-content {
    flex: 1 1 300px;
    margin: 15px;
    align-items: center;
    border: 1px solid #e7e7e7;
    box-shadow: var(--shadow-4);
    padding: 2rem 1rem;
    border-radius: 20px;
}
/* .inner-music-content .contentt {
    margin-block-start: 20px;
} */
.music-icon i {
    font-size: 30px;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 5rem;
    background: var(--purple_D3);
    color: white;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.3s linear;
}
.music-icon i:hover {
    background: transparent;
    border: 1px solid var(--purple_D3);
    color: var(--purple_D3);
}
/*_________________*\
 footer section
\*_________________*/

.footer {
    background: var(--bg-nav);
    text-align: center;
}
.footer .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
}

.footer .box-container .box p {
    font-size: 15px;
    color: var(--black_D3);
    line-height: 2;
    margin-top: 1rem;
    padding: 1rem 0;
}
.footer .box-container .box .share {
    margin-top: 1rem;
}
.footer .box-container .box .share a {
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    border-radius: 10%;
    font-size: 18px;
    border: 0.1rem solid var(--purple_D3);
    color: var(--purple_D3);
    margin-right: 0.7rem;
    text-align: center;
    transition: 0.5s linear;
}
.footer .box-container .box .share a:hover {
    background-color: var(--purple_D3);
    color: white;
}
.footer .credit {
    font-family: "Poppins", sans-serif;
    padding: 1.5rem 0.5rem;
    font-size: 14px;
    color: rgb(110, 110, 110);
    text-align: center;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 15px;
}
.footer .credit a {
    font-weight: 700;
    color: var(--blue);
    border-bottom: 1px solid var(--blue);
}
.footer .credit a:hover {
    color: #0974f1;
}
/*_________________*\
 Responsive
\*_________________*/

/* Responsive  */

@media screen and (min-device-width: 991px) {
    .heading-3 {
        margin-bottom: 8rem;
    }
    .gallery{
        display: flex;
    }
    .gallery a{
        margin: 0;
    }
    .gallery a img{
        margin-right: 0 !important;
    }
}
@media (max-width: 991px) {
    html {
        font-size: 55%;
    }
    #menu-btn {
        display: inline-block;
    }
    .header .navbar {
        position: absolute;
        top: 100%;
        left: -110%;
        width: 19rem;
        height: 40rem;
        justify-content: center;
        box-shadow: var(--shadow-4);
        border-radius: 0.5rem;
        background: white;
    }
    .header .navbar.active {
        left: 2rem;
        transition: 0.4s linear;
    }
    .header .navbar a {
        width: 100%;
        font-size: 15px;
        margin: 1rem 2.5rem;
        display: block;
    }
    #home {
        padding: 1.4rem 15% !important;
    }
    .header {
        padding: 2rem 4rem;
    }
    section {
        padding: 3rem 2rem;
    }
    .dessin .dessin-content {
        margin: auto !important;
    }
    .heading-3 {
        margin-bottom: 15rem;
    }
    .music .music-content .left-music-content p {
        width: 100%;
    }
    .music .music-content .right-music-content {
        margin-right: 0;
    }
    .music .music-content .right-music-content .right-btn {
        text-align: center;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    /* #menu-btn {
        display: inline-block;
    }
    .header .navbar {
        position: absolute;
        top: 100%;
        left: -110%;
        width: 19rem;
        height: 40rem;
        justify-content: center;
        box-shadow: var(--shadow-4);
        border-radius: 0.5rem;
        background: white;
    }
    .header .navbar.active {
        left: 2rem;
        transition: 0.4s linear;
    }
    .header .navbar a {
        width: 100%;
        font-size: 15px;
        margin: 1rem 2.5rem;
        display: block;
    }
    #home {
        padding: 1.4rem 15% !important;
    } */
    .home .content h1 {
        font-size: 2.6rem;
    }
    .home .content p {
        font-size: 14px;
    }
    .btn {
        padding: 0.5rem 3rem;
        font-size: 14px;
        border-radius: 100px;
        margin-top: 8px;
    }
    /* dessin  */
    .dessin .dessin-content {
        margin: auto !important;
        margin-top: -160px !important;
    }
    /* music  */
    .music .music-content {
        margin-top: -160px;
    }

    /* audi  */
    .audiovisuel .audio-content {
        width: 100%;
        text-align: center;
    }
    .audiovisuel .audio-content p {
        margin-bottom: 40px;
    }
    .grid-gallery {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        grid-auto-rows: 250px;
    }

    .dessin .gallery a {
        width: 100% !important;
        margin: auto !important;
    }
    .dessin .gallery a #image2 {
        margin: 0 !important;
    }
    .audiovisuel .gallery a {
        width: 100% !important;
        margin: auto !important;
    }
    .audiovisuel .gallery a #imag2 {
        margin: 0 !important;
    }
    .theatre {
        padding-top: 23px !important;
    }
    /* .theatre .titre{
      margin-top: -200px !important ;
    } */
    .heading {
        margin-bottom: 25.6rem;
    }
}
@media (max-width: 450px) {
    html {
        font-size: 50%;
    }
    .home .content {
        margin-top: 50px;
    }
    #home {
        padding: 1rem 10% !important;
        /* margin-top: -60px; */
    }
    .home .content h1 {
        width: 100% !important;
    }
    .dessin .dessin-content h3 {
        font-size: 18px;
    }
    #audiovisuel {
        margin-top: -10px;
    }
    #music1 {
        margin-top: -10px;
    }
    .dessin .upper-more {
        margin-top: -40px;
    }
    .audiovisuel .upper-more2 {
        margin-top: -47px;
    }
}